{% extends "../component/_latout.html" %}
{% block style %}
<link href="/public/admin/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

{% endblock %}
{% block content %}
<!--wrap-->
<div>
    <!--主体部分-->
    <div class="row">
        <div class="col-sm-12">
          <div class="ibox m-b-none float-e-margins">
              <div class="ibox-title">
                  <h5>首页轮播 -- {% if 6 - banners.length > 0 %}还可添加 {{ 6 - banners.length }} 张轮播图{% else %}已满6张轮播图{% endif %}</h5>
                  <div class="ibox-tools">
                      {# <a class="collapse-link">
                          <i class="fa fa-chevron-up"></i>
                      </a>
                      <a class="close-link">
                          <i class="fa fa-times"></i>
                      </a> #}
                  </div>
              </div>
              <div class="ibox-content">
                <!--共多少篇文章-->
                {# <div class="ibox m-b-none">
                  <form method="get" class="form-horizontal">
                    <div class="clear">
                          <div class="input-group-container  pull-left">
                            <div class="input-group">
                                <input type="text" placeholder="请输入关键词" class="input-sm form-control">
                                <span class="input-group-btn m-b-none"><button type="button" class="btn btn-sm btn-primary"> 搜索</button> </span>
                            </div>
                          </div>
                      </div>
                  </form>
                </div> #}

                <!--添加新分类-->
                <div class="row m-t">
                  <div class="col-sm-4">
                    <div class="clearfix">
                        <form method="get" class="form-horizontal">
                          <div class="form-group">
                              <label class="col-sm-3 control-label">名称</label>

                              <div class="col-sm-9">
                                  <input type="text" class="form-control" placeholder="请输入轮播图名称" id="name">
                              </div>
                          </div>
                          <div class="form-group">
                              <label class="col-sm-3 control-label">链接</label>
                              <div class="col-sm-9">
                                  <input type="text" class="form-control" placeholder="请输入该轮播跳转的链接" id="href">
                              </div>
                          </div>
                          <div class="form-group">
                              <label class="col-sm-3 control-label">图片</label>
                              <div class="col-sm-9">
                                    <input type="text" class="form-control" placeholder="请输入图片地址（可去资源库复制）"  id="img">
                                    <div class="m-t hide" id="show_img">
                                        <img  src="" width="80" height="80">
                                    </div>
                              </div>
                          </div>
                          <div class="form-group tx-c">
                            <label class="col-sm-3 ">
                              <button class="btn btn-primary hide" type="button" id="cancel_edit">取消编辑</button>
                            </label>
                            <div class="col-sm-9">
                              <button class="btn btn-primary my-center-button" type="button" id="submitAddOrEdit" {% if 6 - banners.length <= 0 %}disabled title="最多只可添加6张哦~"{% endif %}>新增</button>
                            </div>
                          </div>
                        </form>
                    </div>
                  </div>
                  <div class="col-sm-8 passege-right">
                    <!--表格-->
                    <div class="my-table ibox-content" >
                      <table class="table table-hover  m-b-none" >
                        <thead>
                            <tr>
                                {# <th class="bs-checkbox">
                                    <div class="th-inner ">
                                        <input name="btSelectAll" type="checkbox">
                                    </div>
                                    <div class="fht-cell"></div>
                                </th> #}
                                <th>
                                    <div class="th-inner ">名称</div>
                                    <div class="fht-cell"></div>
                                </th>
                                <th>
                                    <div class="th-inner ">链接</div>
                                    <div class="fht-cell"></div>
                                </th>
                                <th>
                                    <div class="th-inner ">图片展示</div>
                                    <div class="fht-cell"></div>
                                </th>
                                <th>
                                    <div class="th-inner ">操作</div>
                                    <div class="fht-cell"></div>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for banner in banners %}
                            <tr>
                                {# <td class="bs-checkbox">
                                    <input name="btSelectItem" type="checkbox">
                                </td> #}
                                <td class="text-success">{{ banner.name }}</td>
                                <td class="text-success"><a target="_blank" href="{{banner.href}}">{{ banner.href }}</a></td>
                                <td>
                                    {% if banner.img %}
                                    <img src="{{ banner.img }}" width=40 height=40 />
                                    {% else %}
                                    --
                                    {% endif %}
                                </td>
                                <td>
                                    <a href="{{ banner.img }}" target="_blank">预览图片</a>
                                    <a href="javascript:void(0)" class="edit_banner" bannerId="{{banner.id}}" name="{{banner.name}}" link="{{banner.href}}" img="{{banner.img}}">编辑</a>
                                    <a href="javascript:void(0)" class="delete_banner" bannerId="{{banner.id}}">删除</a>
                                  {# <div class="dropdown">
                                    <div class="dropdown-toggle" data-toggle="dropdown">
                                      <span class="fa fa-ellipsis-h"></span>
                                    </div>
                                    <ul class="dropdown-menu my-dropmenu" role="menu">
                                        <li><a href="javascript:void(0)">编辑</a></li>
                                        <li><a href="javascript:void(0)">预览</a></li>
                                        <li><a href="javascript:void(0)">删除</a></li>
                                        <li><a href="javascript:void(0)">发布</a></li>
                                    </ul>
                                  <div> #}
                                </td>
                            </tr>
                            {% else %}
                            <tr>
                                <td colspan="10">
                                    <!--没有数据时的显示-->
                                    <div class="no-data-container">
                                        <i class="fa fa-frown-o"></i>
                                        <span>您暂时还没有添加轮播图哦~</span>
                                    </div>
                                    <!--/没有数据时的显示-->
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                      </table>
                    </div>
                    <!--/表格-->
                  </div>
                </div>
                <!--添加新分类-->
              </div>
          </div>
        </div>
    </div>
    <!--/主体部分-->
</div>

{% endblock %} 
{% block script %}
<script src="/public/admin/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/public/admin/js/common/banner/list.js"></script>
{% endblock %} 
